﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QuarkDoc</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!-- Extra details for Live View on GitHub Pages -->
    <!-- Canonical SEO -->
    <link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard-pro" />
    <!--  Social tags      -->
    <meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, material design, material dashboard bootstrap 4 dashboard">
    <meta name="description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="Material Dashboard PRO by Creative Tim">
    <meta itemprop="description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">

    <meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg">
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="product">
    @*<meta name="twitter:site" content="@creativetim">*@
    <meta name="twitter:title" content="Material Dashboard PRO by Creative Tim">
    <meta name="twitter:description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">
    @*<meta name="twitter:creator" content="@creativetim">*@
    <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg">
    <!-- Open Graph data -->
    <meta property="fb:app_id" content="655968634437471">
    <meta property="og:title" content="Material Dashboard PRO by Creative Tim" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="http://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html" />
    <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg" />
    <meta property="og:description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design." />
    <meta property="og:site_name" content="Creative Tim" />
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <!-- CSS Files -->
    <link href="~/Assets/Style/material-dashboard.min.css" rel="stylesheet" />
    <script src="~/Assets/Script/core/vue.js"></script>
</head>
<body>
    <div class="wrapper ">
        <div style="padding-bottom:100px;">
            <div class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
                <div class="">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/Home">
                                <i class="material-icons">dashboard</i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="" data-toggle="modal" data-target="#newModal">
                                <i class="material-icons">add</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header card-header-rose card-header-icon">
                                <div class="card-icon">
                                    <i class="material-icons">assignment</i>
                                </div>
                                <h4 class="card-title">团队管理</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table" id="userTab">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>用户名</th>
                                                <th>邮箱</th>
                                                <th>是否管理员</th>
                                                <th>是否启用</th>
                                                <th class="text-right">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-bind:id="entity.Id" v-for="entity in entities">
                                                <td>{{ entity.Id}}</td>
                                                <td>{{ entity.UserName}}</td>
                                                <td>{{ entity.Email}}</td>
                                                <td>{{ entity.IsAdmin}}</td>
                                                <td>{{ entity.IsEnabled}}</td>
                                                <td class="td-actions text-right">
                                                    <button type="button" rel="tooltip" class="btn btn-info" v-bind:value="entity.Id" v-on:click="ResetPwd($event)">
                                                        <i class="material-icons">person</i>
                                                    </button>
                                                    <button type="button" class="btn btn-success" v-bind:value="entity.Id" v-on:click="Edit($event)">
                                                        <i class="material-icons">edit</i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Classic Modal -->
    <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="material-icons">clear</i>
                    </button>
                </div>
                <form id="NewUserForm" method="post" action="">
                    <div class="modal-body">
                        <div class="form-group bmd-form-group is-filled is-focused">
                            <div class="card-body ">
                                <div class="form-group">
                                    <label for="userName" class="bmd-label-floating"> 用户名 *</label>
                                    <input type="text" class="form-control valid" id="userName" name="userName" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <label for="email" class="bmd-label-floating"> 邮箱（登录账户） *</label>
                                    <input type="email" class="form-control valid" id="email" name="email" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <label for="password" class="bmd-label-floating">密码 *</label>
                                    <input type="password" class="form-control valid" id="password" name="password" required="true" minlength="6">
                                </div>
                                <div class="form-group">
                                    <div class="col-md-9">
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox" id="isAdmin" value="true">是否管理员
                                                <span class="form-check-sign">
                                                    <span class="check"></span>
                                                </span>
                                            </label>
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox" id="isEnabled" value="true">是否启用
                                                <span class="form-check-sign">
                                                    <span class="check"></span>
                                                </span>
                                            </label>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-link">Lets Go</button>
                        <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="material-icons">clear</i>
                    </button>
                </div>
                <form id="EditUserForm" method="post" action="">
                    <div class="modal-body">
                        <div class="form-group bmd-form-group is-filled is-focused">
                            <div class="card-body ">
                                <div class="form-group">
                                    <label for="userName_edit" class="bmd-label-floating"> 用户名 *</label>
                                    <input type="text" class="form-control valid" id="userName_edit" name="userName_edit" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <label for="email_edit" class="bmd-label-floating"> 邮箱（登录账户） *</label>
                                    <input type="email" class="form-control valid" id="email_edit" name="email_edit" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <div class="col-md-9">
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox" id="isAdmin_edit" value="true">是否管理员
                                                <span class="form-check-sign">
                                                    <span class="check"></span>
                                                </span>
                                            </label>
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox" id="isEnabled_edit" value="true">是否启用
                                                <span class="form-check-sign">
                                                    <span class="check"></span>
                                                </span>
                                            </label>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-link">Lets Go</button>
                        <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!--  End Modal -->
    <!--   Core JS Files   -->
    <script src="~/Assets/Script/core/jquery.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/core/popper.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/core/bootstrap-material-design.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/plugins/perfect-scrollbar.jquery.min.js"></script>
    <!-- Plugin for the momentJs  -->
    <script src="~/Assets/Script/plugins/moment.min.js"></script>
    <!--  Plugin for Sweet Alert -->
    <script src="~/Assets/Script/plugins/sweetalert2.js"></script>
    <!-- Forms Validations Plugin -->
    <script src="~/Assets/Script/plugins/jquery.validate.min.js"></script>
    <!--  Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
    <script src="~/Assets/Script/plugins/perfect-scrollbar.jquery.min.js"></script>
    <!--	Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
    <script src="~/Assets/Script/plugins/bootstrap-selectpicker.js"></script>
    <!--  Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
    <script src="~/Assets/Script/plugins/bootstrap-datetimepicker.min.js"></script>
    <!--  DataTables.net Plugin, full documentation here: https://datatables.net/    -->
    <script src="~/Assets/Script/plugins/jquery.dataTables.min.js"></script>
    <!--	Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs  -->
    <script src="~/Assets/Script/plugins/bootstrap-tagsinput.js"></script>
    <!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
    <script src="~/Assets/Script/plugins/jasny-bootstrap.min.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="~/Assets/Script/material-dashboard.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/QDocFramework.js"></script>
    <script>
        var editId;
        var userTool = new Vue({
            el: '#userTab',
            data: {
                entities: []
            },
            methods: {
                FindDirectories: function () {
                    var _self = this;
                    $.ajax({
                        type: "POST",
                        url: "/User/FindUsers",
                        data: {},
                        success: function (result) {
                            _self.entities = $.parseJSON(result).entities;
                        }
                    });
                }, Edit: function (e) {
                    editId = e.currentTarget.value;
                    $("#userName_edit").val($("#" + editId).find("td").eq(1).text());
                    $("#email_edit").val($("#" + editId).find("td").eq(2).text());
                    if ($("#" + editId).find("td").eq(3).text() == "true")
                        $("#isAdmin_edit").prop("checked", true);
                    if ($("#" + editId).find("td").eq(4).text() == "true")
                        $("#isEnabled_edit").prop("checked", true);
                    $("#editModal").modal('show');
                }, ResetPwd: function (e) {
                    editId = e.currentTarget.value;
                    swal({
                        title: '重置密码',
                        input: 'password',
                        showCancelButton: true,
                        confirmButtonText: 'Submit',
                        showLoaderOnConfirm: true,
                        preConfirm: function (password) {
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () {
                                    if (password.length < 6) {
                                        reject('密码长度不能小于6位');
                                    } else {
                                        $.ajax({
                                            type: "POST",
                                            url: "/User/ResetPassword",
                                            data: { code: editId, password: password },
                                            success: function (result) {
                                                if (result == "True") {
                                                    resolve();
                                                } else {
                                                    reject('密码修改失败');
                                                }
                                            }
                                        });

                                    }
                                }, 2000);
                            });

                        },
                        allowOutsideClick: false
                    }).then(function (email) {
                        swal({
                            type: 'success',
                            title: '密码修改',
                            html: '已完成！'
                        });
                    })
                }
            },
            filters: {
                formatDate: function (timeSpan) {
                    var timeSpan = timeSpan.replace('Date', '').replace('(', '').replace(')', '').replace(/\//g, '');
                    var d = new Date(parseInt(timeSpan));
                    return d;

                }
            }
        });
        $(document).ready(function () {
            userTool.FindDirectories();
            var validator = $("#NewUserForm").validate({
                submitHandler: function () {
                    NewUser();
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
                    $(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
                },
                success: function (element) {
                    $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
                    $(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
                },
                errorPlacement: function (error, element) {
                    $(element).append(error);
                },
            });
            var validatorEdit = $("#EditUserForm").validate({
                submitHandler: function () {
                    EditUser();
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
                    $(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
                },
                success: function (element) {
                    $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
                    $(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
                },
                errorPlacement: function (error, element) {
                    $(element).append(error);
                },
            });
        });
        function NewUser() {
            var userName = $("input[name='userName']").val()
            var email = $("input[name='email']").val()
            var password = $("input[name='password']").val()
            var isAdmin = false;
            var isEnabled = false;
            if ($("#isAdmin").get(0).checked) {
                isAdmin = true;
            }
            if ($("#isEnabled").get(0).checked) {
                isEnabled = true;
            }
            $.ajax({
                type: "POST",
                url: "/User/EditUser",
                data: { userName: userName, email: email, password: password, isAdmin: isAdmin, isEnabled: isEnabled, type: "new" },
                success: function (result) {
                    if (result == "True") {
                        $.sw("success-message", "用户创建成功!", function () {
                            location.reload();
                        });
                    } else {
                        $.sw("error-message", "用户创建失败!", null);
                    }
                }
            });
        };
        function EditUser() {
            var userName = $("input[name='userName_edit']").val()
            var email = $("input[name='email_edit']").val()
            var isAdmin = false;
            var isEnabled = false;
            if ($("#isAdmin_edit").get(0).checked) {
                isAdmin = true;
            }
            if ($("#isEnabled_edit").get(0).checked) {
                isEnabled = true;
            }
            $.ajax({
                type: "POST",
                url: "/User/EditUser",
                data: { userName: userName, email: email, code: editId, isAdmin: isAdmin, isEnabled: isEnabled, type: "edit" },
                success: function (result) {
                    if (result == "True") {
                        $.sw("success-message", "用户修改成功!", function () {
                            location.reload();
                        });
                    } else {
                        $.sw("error-message", "用户修改失败!", null);
                    }
                }
            });
        };

    </script>
</body>
</html>
